<template>
  <div>
    <div class="search  ">
      <input type="text" placeholder="🔍搜索你想要的内容" @click="$router.push('GoodsSearch/')">
    </div>
    <div class="分类栏">
      <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl"
          class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
          <div class="mui-scroll">
            <a class="mui-control-item mui-active" @click="filterList('全部')">
              全部
            </a>
            <a class="mui-control-item" @click="filterList('水果')">
              水果
            </a>
            <a class="mui-control-item" @click="filterList('蔬菜')">
              蔬菜
            </a>
            <a class="mui-control-item" @click="filterList('鲜花')">
              鲜花
            </a>
          </div>
        </div>
      </div>

    </div>
    <GoodsList :recoList="recoList"></GoodsList>

  </div>
</template>

<script>
// 导入axios模块与子模块
import axios from 'axios'
import GoodsList from './components/GoodsList.vue';

export default {
  name: 'Goods',
  components: { GoodsList },//代表引入的子模块
  data() {
    return {
      recoList1: [],//总列表
      recoList: [] //被过滤列表
    }
  },
  methods: {//获取json文件内容,
    getGoodsData() {
      axios.get('../static/Goods.json').
        then(this.getGoodsDataSucc)
    },
    getGoodsDataSucc(res) {//获取成功后,将内容放入全局data内
      res = res.data//res就是getGoodsData获取的结果
      if (res) {
        this.recoList1 = res//总列表
        this.recoList = res//被过滤列表
      }
    },
    filterList(item) {
      this.selectedType = item;
      if (item === '全部') {
        this.recoList = this.recoList1;//复原为总列表
      } else {
        this.recoList = this.recoList1.filter//获得过滤后的列表
          (item => item.recoSeller.includes(this.selectedType));
      }//这个方法会提示滚动被重新绑定的报错,但是无伤大雅
    },
  },
  mounted() {
    this.getGoodsData()//在页面加载时,获取商品列表,即调用这个方法
  },
}

</script>

<style scoped lang="stylus">
  .search{
    padding 0px
    margin 10px
  }
  .search input{
    border-radius 50px
    margin 0px
  }
</style>